<template>
	<view class="investment_container">
		<view class="head">
			<view class="acea-row row-middle">
				<image class="logo" :src="storeInfo.image" mode="aspectFit"></image>
				<view class="">
					<view class="">
						<text class="store-name">{{ storeInfo.name }}</text>
						<text class="store-des">(投资人)</text>
					</view>
					<view class="time">
						营业时间: {{ storeInfo.day_time }}
					</view>
				</view>
			</view>
		</view>
		<view class="mid-content">
			<view class="statistics_card">
				<view class="header_hd acea-row row-middle row-between-wrapper">
					<text class="title">门店统计</text>
					<subsection 
						:list="list" 
						active-color="#fff" 
						:current="current" 
						@change="switchChange" 
						button-color="#3198f6"
					></subsection>
				</view>
				<view class="data-content">
					<view class="item border-bottom border-right">
						<cn-money :money="Number(StatisticsInfo.price)" :size="44" color="#333" :showUnit="false"></cn-money>
						<view class="des">{{ name }}订单额</view>
					</view>
					<view class="item border-bottom">
						<cn-money :money="Number(StatisticsInfo.count)" :size="44" color="#333" :showUnit="false"></cn-money>
						<view class="des">{{ name }}订单数</view>
					</view>
					<view class="item border-right">
						<cn-money :money="Number(StatisticsInfo.cx)" :size="44" color="#333" :showUnit="false"></cn-money>
						<view class="des">{{ name }}盈利额</view>
					</view>
					<view class="item">
						<cn-money :money="Number(StatisticsInfo.goods_price)" :size="44" color="#333" :showUnit="false"></cn-money>
						<view class="des">{{ name }}成本额</view>
					</view>
				</view>
			</view>
		</view>
		<view class="list">
			<view class="header_hd acea-row row-middle row-between-wrapper">
				<text class="title">详细数据</text>
				<view class="caleader acea-row row-middle">
					<view class="iconfont icon-fanhui1" @click="reduce"></view>
					<view class="month">
						<picker mode="date" :value="year + '-' + month" fields="month" @change="bindDateChange">
							<view class="uni-input">{{upcaseMonth(month)}}</view>
						</picker>
					</view>
					<view class="iconfont icon-xiangyou" @click="plus"></view>
				</view>
			</view>
			<view class="detail-info acea-row">
				<view class="item">
					<cn-money :money="Number(monthStatistics.price)" :size="44" color="#629D03" :showUnit="false"></cn-money>
					<view class="des">本月订单额</view>
				</view>
				<view class="item">
					<cn-money :money="Number(monthStatistics.goods_price)" :size="44" color="#D9001B" :showUnit="false"></cn-money>
					<view class="des">本月总成本</view>
				</view>
				<view class="item">
					<cn-money :money="Number(monthStatistics.cx)" :size="44" color="#629D03" :showUnit="false"></cn-money>
					<view class="des">本月盈利额</view>
				</view>
			</view>
			<view class="table">
				<view class="table-head acea-row">
					<view class="item">日期</view>
					<view class="item">订单数</view>
					<view class="item center">成本</view>
					<view class="item center">盈利</view>
					<view class="item center">订单额</view>
				</view>
				<scroll-view scroll-y="true">
					<view 
						class="table-row acea-row" 
						v-for="(item, index) in tableList" 
						:key="index"
					>
					<!-- @click="rowClick(item.time)" -->
						<view class="item">{{ item.time }}</view>
						<view class="item">{{ item.count }}</view>
						<view class="item center">{{ item.goods_price }}</view>
						<view class="item center">{{ item.cx }}</view>
						<view class="item center">{{ item.price }}</view>
					</view>
					<view v-if="tableList.length == 0" class="empty acea-row row-column row-middle padding30">
						<image src="../static/wechat_login.png" mode=""></image>
						<text class="padding30 text-gray">没有相关数据!</text>
					</view>
					<!-- <view class="nomore acea-row row-center-wrapper padding20">没有更多了</view> -->
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import { 
		investorStoreDetail, 
		investorStoreStatistics,
		investorMonth,
		investorMonthList
	} from '@/api/store.js'
	import cnMoney from '@/components/cn-money/cn-money.vue';
	import subsection from '@/components/subsection/subsection'
	export default {
		components: {
			subsection,
			cnMoney
		},
		data() {
			return {
				list: [
					{
						name: '今日',
						type: 1
					}, 
					{
						name: '昨日',
						type: 2
					}, 
					{
						name: '本月',
						type: 3
					}
				],
				type: 1,
				name: '今日',
				current: 0,
				year: '',
				month: '',
				storeInfo: {},
				storeId: '',
				StatisticsInfo: {},
				monthStatistics: {},
				tableList: []
			};
		},
		onLoad(opt) {
			
			if(opt.id) this.storeId = opt.id
			this.doHandleMonth()
			this.getDetail(opt.id)
			this.getStatistics(opt.id)
		},
		methods: {
			// 获取门店详情
			getDetail(id) {
				investorStoreDetail({store_id: id}).then(res => {
					this.storeInfo = res.data
				})
			},
			// 获取门店统计数据
			getStatistics() {
				investorStoreStatistics({store_id: this.storeId, type: this.type}).then(res => {
					if(res.status == 200) {
						// let uid = uni.getStorageSync('UID');
						// let uidData = [94432, 1394, 94385];
						// let uidData1 = [11313, 94745, 1789, 11088, 95183, 95182, 963];
						// if(uid == 1665) {//老板-所有数据 x3
						// 	res.data.count = res.data.count*3
						// 	res.data.price = Number(res.data.price)*3
						// 	res.data.cx = Number(res.data.cx)*3
						// 	res.data.goods_price = Number(res.data.goods_price)*3
						// 	this.StatisticsInfo = res.data
						// } else if(uidData1.indexOf(uid) > -1) {
						// 	if(this.year >= 2022) { //11313 - 2022年之后x3，2022年之前不动
						// 		res.data.count = res.data.count*3
						// 		res.data.price = Number(res.data.price)*3
						// 		res.data.cx = Number(res.data.cx)*3
						// 		res.data.goods_price = Number(res.data.goods_price)*3
						// 		this.StatisticsInfo = res.data
						// 	} else {
						// 		this.StatisticsInfo = res.data
						// 	}
						// } else if(uidData.indexOf(uid) > -1) {
						// 	if(this.year >= 2022 && this.month >= 4) { //其他规则 - 2022年4月后*3，之前的正常
						// 		res.data.count = res.data.count*3
						// 		res.data.price = Number(res.data.price)*3
						// 		res.data.cx = Number(res.data.cx)*3
						// 		res.data.goods_price = Number(res.data.goods_price)*3
						// 		this.StatisticsInfo = res.data
						// 	} else {
						// 		this.StatisticsInfo = res.data
						// 	}
						// } else { //普通投资人
							this.StatisticsInfo = res.data 
						// }
					}
				})
			},
			// tab切换事件
			switchChange(e) {
				this.type = this.list[e].type
				this.name = this.list[e].name 
				this.getStatistics()
			},
			// 获取月度统计数据
			getMonthData() {
				investorMonth({
					store_id: this.storeId,
					formyear: this.year,
					formmonth: this.month
				}).then(res => {
					if(res.status == 200) {
						// let uid = uni.getStorageSync('UID');
						// let uidData = [94432, 1394, 94385];
						// let uidData1 = [11313, 94745, 1789, 11088, 95183, 95182, 963];
						// if(uid == 1665) {//老板-所有数据 x3
						// 	res.data.count = res.data.count*3
						// 	res.data.price = Number(res.data.price)*3
						// 	res.data.cx = Number(res.data.cx)*3
						// 	res.data.goods_price = Number(res.data.goods_price)*3
						// 	this.monthStatistics = res.data
						// } else if(uidData1.indexOf(uid) > -1) {
						// 	if(this.year >= 2022) { //11313 - 2022年之后x3，2022年之前不动
						// 		res.data.count = res.data.count*3
						// 		res.data.price = Number(res.data.price)*3
						// 		res.data.cx = Number(res.data.cx)*3
						// 		res.data.goods_price = Number(res.data.goods_price)*3
						// 		this.monthStatistics = res.data
						// 	} else {
						// 		this.monthStatistics = res.data
						// 	}
						// } else if(uidData.indexOf(uid) > -1) {
						// 	if(this.year >= 2022 && this.month >= 4) { //其他规则 - 2022年4月后*3，之前的正常
						// 		res.data.count = res.data.count*3
						// 		res.data.price = Number(res.data.price)*3
						// 		res.data.cx = Number(res.data.cx)*3
						// 		res.data.goods_price = Number(res.data.goods_price)*3
						// 		this.monthStatistics = res.data
						// 	} else {
						// 		this.monthStatistics = res.data
						// 	}
						// } else { //普通投资人
							this.monthStatistics = res.data 
						// }
					}
				})
			},
			// 获取月度详细数据
			getMonthDetail() {
				investorMonthList({
					store_id: this.storeId,
					formyear: this.year,
					formmonth: this.month
				}).then(res => {
					if(res.status == 200) {
						// let uid = uni.getStorageSync('UID');
						// let uidData = [94432, 1394, 94385];
						// let uidData1 = [11313, 94745, 1789, 11088, 95183, 95182, 963];
						// if(uid == 1665) {//老板-所有数据 x3
						// 	res.data.map(el => {
						// 		el.count = el.count*3
						// 		el.price = (Number(el.price)*3).toFixed(2)
						// 		el.cx = (Number(el.cx)*3).toFixed(2)
						// 		el.goods_price = (Number(el.goods_price)*3).toFixed(2)
						// 	})
						// 	this.tableList = res.data
						// } else if(uidData1.indexOf(uid) > -1) {
						// 	if(this.year >= 2022) { //11313 - 2022年之后x3，2022年之前不动
						// 		res.data.map(el => {
						// 			el.count = el.count*3
						// 			el.price = (Number(el.price)*3).toFixed(2)
						// 			el.cx = (Number(el.cx)*3).toFixed(2)
						// 			el.goods_price = (Number(el.goods_price)*3).toFixed(2)
						// 		})
						// 		this.tableList = res.data
						// 	} else {
						// 		this.tableList = res.data
						// 	}
						// } else if(uidData.indexOf(uid) > -1) {
						// 	if(this.year >= 2022 && this.month >= 4) { //其他规则 - 2022年4月后*3，之前的正常
						// 		res.data.map(el => {
						// 			el.count = el.count*3
						// 			el.price = (Number(el.price)*3).toFixed(2)
						// 			el.cx = (Number(el.cx)*3).toFixed(2)
						// 			el.goods_price = (Number(el.goods_price)*3).toFixed(2)
						// 		})
						// 		this.tableList = res.data
						// 	} else {
						// 		this.tableList = res.data
						// 	}
						// } else { //普通投资人
							this.tableList = res.data 
						// }
					} 
				})
			},
			// 日期选择
			bindDateChange(e) {
				let val = e.target.value.substr(5)
				let year = e.target.value.substr(0, 4)
				this.year = year
				if(val.charAt(0) == 0) {
					this.month = val.charAt(1)
				} else {
					this.month = val
				}
				this.getMonthData()
				this.getMonthDetail()
			},
			doHandleMonth() {
				var myDate = new Date();
				var year = myDate.getFullYear();
				var tMonth = myDate.getMonth();
				var m = tMonth + 1;
				
				this.month = m
				this.year = year
				this.getMonthData()
				this.getMonthDetail()
			},
			reduce() {
				if(this.month == 1) return
				this.month--
				this.getMonthData()
				this.getMonthDetail()
			},
			plus() {
				if(this.month == 12) return
				this.month++
				this.getMonthData()
				this.getMonthDetail()
			},
			upcaseMonth(m) {
				var chinese = ['','一', '二', '三', '四', '五', '六', '七', '八', '九'];
				
				var month = m.toString()
				if (month.length == 2) {
					if (month.charAt(0) == "1") {
						month = "十" + chinese[month.charAt(1)] + "月";
					}
				} else {
					month = (chinese[month.charAt(0)] + "月");
				}
				return month;
			},
			rowClick(time) {
				uni.navigateTo({
					url: `/pages/users/investment_days/investment_days?id=${this.storeId}&date=${this.year + '-' + time}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #F5F5F5;
	}
	.investment_container {
		width: 100%;
		.head {
			width: 100%;
			height: 300rpx;
			background-image: linear-gradient(to right, #39AAF7, #4078F6);
			padding: 50rpx 40rpx;
			color: #fff;
			.logo {
				width: 100rpx;
				height: 100rpx;
				margin-right: 20rpx;
				background-color: #fff;
				border-radius: 50%;
			}
			.store-name {
				font-size: 32rpx;
			}
			.store-des {
				font-size: 24rpx;
			}
			.time {
				color: rgba(255,255,255,0.74);
				font-size: 26rpx;
			}
		}
		.mid-content {
			width: 100%;
			padding: 0 20rpx;
			margin-top: -100rpx;
			margin-bottom: 30rpx;
			.statistics_card {
				width: 100%;
				height: 430rpx;
				background-color: #fff;
				border-radius: 10rpx;
				padding: 40rpx;
				.header_hd {
					.title {
						font-size: 32rpx;
						font-weight: 700;
					}
				}
				.data-content {
					display: flex;
					flex-wrap: wrap;
					padding: 0 20rpx;
					margin-top: 20rpx;
					.item {
						display: flex;
						align-items: center;
						justify-content: center;
						flex-direction: column;
						width: 50%;
						padding: 30rpx 0;
						.des {
							margin-top: 5rpx;
							color: #666;
							font-size: 26rpx;
						}
					}
					.border-bottom {
						border-bottom: 1px solid #eee;
					}
					.border-right {
						border-right: 1px solid #eee;
					}
				}
			}
		}
		.list {
			width: 100%;
			background-color: #fff;
			border-top: 2px solid #70B603;
			padding: 30rpx 0;
			.header_hd {
				padding: 0 30rpx;
				.title {
					font-size: 32rpx;
					font-weight: 700;
				}
				.caleader {
					background-color: #f5f5f5;
					.month {
						padding: 0 20rpx;
					}
					.iconfont {
						width: 50rpx;
						height: 50rpx;
						line-height: 50rpx;
						text-align: center;
						font-size: 28rpx;
						color: #666;
					}
				}
			}
			.detail-info {
				margin-top: 30rpx;
				border-bottom: 1px solid #eee;
				.item {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					width: 33.3%;
					padding: 10rpx 0 30rpx;
					.des {
						margin-top: 5rpx;
						color: #666;
						font-size: 26rpx;
					}
				}
			}
		}
		.table {
			width: 100%;
			padding: 10rpx 40rpx;
			font-size: 28rpx;
			.table-head, .table-row {
				width: 100%;
				.item {
					flex: 1;
					height: 80rpx;
					line-height: 80rpx;
					border-bottom: 1px solid #eee;
					&:nth-child(1), &:nth-child(2) {
						flex: 0.9;
					}
					&:nth-child(3), &:nth-child(4), &:nth-child(5) {
						flex: 1.2;
					}
				}
				.center {
					text-align: center;
				}
			}
			.table-head {
				position: sticky;
				top: 0;
				background-color: #fff;
				z-index: 10;
				.item {
					font-size: 30rpx;
				}
			}
		}
		
	}
</style>
